<template>
	<view class="container">
		<!-- 		<view class="sr_title">
			<view class="sr_title1">
				<view @tap="goBack">
					<image src="../../../static/img/zjt.png" mode="widthFix"></image>
					返回
				</view>
				<view>
					服务
				</view>
			</view>
		</view> -->
		<!-- <view style="width: 100%;height: 10vh;"></view> -->
		<view class="photo" @click="changeImg('icon')">
			<!-- {{form.icon}} -->
			<image style="height: 170rpx;" :src="form.icon==''?'/static/fw/xj.gif':form.icon" mode="aspectFit" ></image>
		</view>
		<!-- <up-image :show-loading="true" :src="form.icon" width="750rpx" height="550rpx"></up-image> -->
		<!-- <u-swiper v-else :list="imageList" indicator  height="550rpx"></u-swiper> -->
		<view class="list">
			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>选择分类 </view>
				<view>
					<uni-data-picker placeholder="请选择分类" popup-title="请选择分类" :localdata="dataTree" v-model="form.cid"
						:border="false" @change="onchange" @nodeclick="onnodeclick">
					</uni-data-picker>
					<!-- <text>{{form.categoryName?form.categoryName:''}}</text> -->
					<!-- <image src="../../../static/img/yjt80.png" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- <view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>选择小类</view>
				<view>
					<image src="../../../static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>服务名称</view>
				<input placeholder="请输入服务名称" v-model="form.serviceName" />
			</view>
			<view class="list2">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>原价</view>
				<view class="align-items: baseline;">
					<view>￥</view>
					<input v-model="form.servicePrice" placeholder="原价" />
				</view>
				<view @click="toNav(`/pages/priceType/index?priceTypeId=${form.priceType}`)">
					<text> {{filterType(form.priceType)?filterType(form.priceType):'价格类型'}}</text>
					<image src="../../../static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>促销价</view>
				<view>￥</view>
				<input v-model="form.discountPrice" placeholder="促销价" />
			</view>

			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>服务时间</view>
				<input v-model="form.serviceTime" placeholder="如每周3次" />
			</view>
			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>服务状态</view>
				<view>
					<up-switch v-model="form.status" activeColor="#03c213" :activeValue="1"
						:inactiveValue="0"></up-switch>
				</view>
			</view>

			<view class="list4" style="margin-top: 5%;">
				<view class="list4_1"><text class="red">*</text><text>服务说明</text></view>
				<view class="list4_2">
					<textarea v-model="form.buyDescription" placeholder="服务介绍,优势/卖点说明" />
				</view>
			</view>

			<!-- <view class="list4" style="margin-top: 5%;">
				<view class="list4_1"><text>使用限制</text><text>(多选，不选择代表不受任何限制)</text></view>
				<view class="list4_2">
					<view v-for="(item,index) in typeList" :key="index">{{item}}</view>
				
				</view>
			</view> -->

			<!--<view class="list1" style="margin-top: 5%;">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>有效期</view>
				<view>
					<text>2016.6.15-2026.6.15</text>
					<image src="../../../static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			 <view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>套餐详情</view>
				<view>
					<image src="../../../static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list1">
				<view>
					<image src="../../../static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>购买须知</view>
				<view>
					<image src="../../../static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view> -->
		</view>


		<!-- <view class="btnSty">
			<button @click="goPage">放入仓库</button>
			<button @click="goPage">立即发布</button>
		</view>
		<view style="width: 100%;height: 10vh;"></view> -->
	</view>
	<view class="footer"></view>
	<view class="btnSty">
		<up-button type="success" :loading="loading" text="提交" @click="save"></up-button>
	</view>

</template>


<script>
	import {
		serviceSaveApi,
		serviceDetailApi,
		categoryListApi
	} from '@/api/service.js'
	import {
		goBack
	} from '@/utils/utils.js'
	import basUrl from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import filterType from '@/utils/priceType.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const state = reactive({
				loading: false,
				typeList: ['周末不可用', '节假日不可用'],
				dataTree: [],
				form: {
					buyDescription: '',
					cid: null,
					priceType: null,
					status: 1,
					priceTypeName: '',
					categoryName: null,
					discount: null,
					icon: "",
					id: null,
					serviceName: null,
					servicePrice: null,
					discountPrice: null,
					serviceTime: null,
					uid: null,
				},
			})
			onLoad(async (option) => {
				uni.setNavigationBarTitle({
					title: "服务",
				})
				await getcategory()
				if (option.id) {
					state.form.id = option.id
					await getData()
				}
				uni.$on('getCategory', (data) => {
					state.form.cid = data.id
					state.form.categoryName = data.name
				})
				uni.$on('getPriceType', (data) => {
					state.form.priceType = data.value
					state.form.priceTypeName = data.name
				})

			})
			onUnload(() => {
				uni.$off('getCategory')
				uni.$off('getPriceType')

			})
			const save = async () => {
				console.log(state.form)
				if (!state.form.icon) {
					uni.$u.toast("请上传封面图片");
					return false;
				}
				if (!state.form.cid) {
					uni.$u.toast("请选择服务分类");
					return false;
				}
				if (!state.form.serviceName) {
					uni.$u.toast("请填写服务名称");
					return false;
				}
				if (state.form.servicePrice == 0 && !state.form.servicePrice) {
					uni.$u.toast("请填写服务价格");
					return false;
				}
				if (!state.form.priceType && state.form.priceType != 0) {
					uni.$u.toast("请选择价格类型");
					return false;
				}
				if (!state.form.discountPrice && state.form.discountPrice == 0) {
					uni.$u.toast("请填写促销价格");
					return false;
				}
				if (Number(state.form.discountPrice) > Number(state.form.servicePrice)) {
					uni.$u.toast("促销价格不能大于原价");
					return false;
				}
				if (!state.form.buyDescription) {
					uni.$u.toast("请填写服务说明");
					return false;
				}
				state.loading = true
				state.form.discount = Math.round(state.form.discountPrice / state.form.servicePrice * 10) / 10
				try {
					let obj = {
						...state.form
					}
					await serviceSaveApi(obj)
					console.log("1111")
					goBack()
				} catch {
					state.loading = false
				}

			}
			const getData = async () => {
				const {
					data
				} = await serviceDetailApi(state.form.id)
				let obj = {
					...data
				}
				delete obj.server
				obj.discountPrice = (obj.servicePrice * obj.discount).toFixed(2)
				state.form = obj
			}

			const getcategory = async () => {
				const {
					data
				} = await categoryListApi()
				// let list = data.filter((item) => item.id == state.form.cid)
				// if (list.length > 0) {
				// 	state.form.categoryName = list[0].name
				// }
				data.forEach(im => {
					im.text = im.name;
					im.value = im.id;
				});
				var tree = buildTree(data);
				console.log(tree);
				state.dataTree = tree;
			}



			const goPage = (item) => {
				uni.navigateTo({
					url: '/pages/index/compont/persionSuccess'
				})
			}

			// 分类选择
			const toNav = (url) => {
				uni.navigateTo({
					url
				})
			}

			function onchange() {

			}

			function onnodeclick() {}
			//选择图片
			const changeImg = (key) => {

				// 从相册选择9张图
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(res);
						Upload(res.tempFilePaths[0]).then((r) => {
							state.form[key] = basUrl.baseURL+r
						})
					},
					fail(res) {
						console.log(res);
					}
				})
			}

			function buildTree(items) {
				// 创建一个映射来存储所有节点，以id为键  
				const nodeMap = new Map();
				// 创建一个空数组来存放根节点  
				const roots = [];

				// 遍历所有项，创建节点并存储在nodeMap中  
				for (let item of items) {
					// 创建节点对象，初始化children数组  
					let node = {
						...item,
						children: []
					};
					// 将节点添加到nodeMap中  
					nodeMap.set(item.id, node);
					// 如果parentId为null或undefined，则该节点是根节点  
					if (item.parentId === null || item.parentId === undefined) {
						// 将根节点添加到roots数组中  
						roots.push(node);
					}
				}

				// 遍历所有项（或nodeMap的values），为每个节点找到并添加子节点  
				for (let node of nodeMap.values()) {
					// 如果该节点有parentId且parentId对应的节点已存在  
					if (node.parentId !== null && node.parentId !== undefined && nodeMap.has(node.parentId)) {
						// 找到父节点并添加当前节点作为子节点  
						nodeMap.get(node.parentId).children.push(node);
					}
				}

				// 返回根节点数组（或单个根节点，如果只有一个）  
				if (roots.length === 1) {
					return roots[0]; // 返回单个根节点  
				}
				return roots; // 返回根节点数组  
			}


			return {
				...toRefs(state),
				goPage,
				getcategory,
				filterType,
				toNav,
				save,
				getData,
				onchange,
				onnodeclick,
				changeImg,
			}
		}

	}
</script>

<style>
	page {
		background-color: #EFEFEF;
		font-size: 32rpx;
	}
</style>
<style scoped lang="scss">
	.red {
		color: #ef4107;
	}



	.ml_15 {
		margin-left: 15rpx;
	}

	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.photo {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		// image {
		// 	width: 200rpx;
		// 	height: 200rpx;
		// }
	}

	.list {
		width: 100%;

		.list1 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #eaeaea;
			position: relative;
			color: #808080;

			view:nth-child(1) {
				width: 60rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 50%;
					height: 100%;
					margin: 30% 0;
				}
			}

			view:nth-child(2) {
				width: 160rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			input {
				width: 70%;
				height: 100%;
				z-index: 1;
			}

			view:nth-child(3) {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #808080;
				position: relative;


				image {
					width: 40rpx;
					height: 100%;
					padding-right: 15rpx;
				}
			}
		}

		.list2 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #eaeaea;
			position: relative;
			color: #808080;

			view:nth-child(1) {
				width: 60rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 50%;
					height: 100%;
					margin: 30% 0;
				}
			}

			view:nth-child(2) {
				width: 160rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}


			view:nth-child(3) {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #808080;

				position: relative;

				input {
					width: 100%;
					height: 100%;
					z-index: 1;
				}

			}

			view:nth-child(4) {
				width: 250rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 28rpx;

				image {
					width: 40rpx;
					height: 100%;
					padding-right: 15rpx;
				}
			}
		}

		.list3 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #eaeaea;


			view:nth-child(1) {
				width: 35%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			input {
				width: 65%;
				height: 100%;
			}
		}

		.list4 {
			width: 100%;
			background-color: white;
			border-bottom: 2rpx solid #eaeaea;


			.list4_1 {
				width: 100%;
				height: 6vh;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				text:nth-child(1) {
					font-size: 30rpx;
					margin: 0 2% 0 5%;
				}

				text:nth-child(2) {
					font-size: 25rpx;
					color: #808080;
				}
			}

			.list4_2 {
				padding: 20rpx;

				textarea {
					min-height: 250rpx;
					width: 100%;
					color: #666;
				}
			}


		}
	}

	.status_box {
		background: #fff;

		.u-slot-title {
			display: flex;
			align-items: center;
		}

		.u-cell-text {
			margin-right: 20rpx;
		}
	}


	.btnSty {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 20rpx 0 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	}

	.footer {
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
	}
</style>